<script lang="ts" setup>
import { notes,user } from './../store/index'
import { WebviewWindow, appWindow } from '@tauri-apps/api/window';
import { onMounted,reactive,ref} from 'vue'
import { note } from '../type';

const notesStore = notes()
// 初始化组件 
onMounted(()=>{
    window.addEventListener('storage',function(e:any){
        if(e.key == 'notes'){
            notesStore.notes = JSON.parse(e.newValue).notes
        }
    })
})

// 打开已有的note

const openEditor=async function(note:any){
    const openwin = proxy.$wins.filter((item:any)=>{
        return item.label === note.noteid
    })
    if(openwin.length > 0){
        try {
            await openwin[0].setFocus();
            return
        } catch (error) {
            
        }
        
    }
    console.log(2)
    const win = new WebviewWindow(note.noteid,{
        title:'note',
        url:'/#/app/noteEditor',
        height:400,
        width:400,
        minWidth:400, 
        minHeight:400, 
        decorations: false,
        alwaysOnTop:false,
        skipTaskbar:true,
    })
    // userStore.wins.push(win)
    proxy.$wins.push(win)
}
import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance() as any

const delnote = function(note:note){
    notesStore.notes.filter((item:note,index:number)=>{
        if(item.noteid == note.noteid){
            proxy.$wins.filter((item1:any,index1:number)=>{
                if(item1.label == notesStore.notes[index].noteid){
                    item1.close();
                    proxy.$wins.splice(index1,1)
                }
                return false;
            })
            notesStore.notes.splice(index,1)
        }
        return false;
    })
} 
</script>

<template>
    <div style="height:35px;width: 100%;"></div>
    <div class="noteout">
        <div @click="openEditor(item)" class="noteindiv" v-for="item in [...notesStore.notes].reverse()" :key="item.noteid" :style="{background:item.color}">
            <div @click.stop="delnote(item)">
                <img src="/icon/delete.png" class="delbar">
            </div>
            <div class="notein" v-html="item.htmltext"></div>
        </div>
    </div>
</template> 

<style>
.noteout{
    transition: all 0.2s linear;
    width: 100vw;
    height: calc(100vh - 35px);
    background: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: start;
    justify-content:center;
    overflow-x: hidden;
}
.noteindiv{
    width:calc(100% - 10px - 10px);
    min-height:80px;
    border-radius: 5px;
    margin: 5px 10px 5px 10px;
    padding: 5px 5px;
    box-sizing: border-box;
}
.notein{
    min-height: 60px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
}

.delbar{
    float: right;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.delbar:hover{
    width: 20px;
    height: 20px;
    background: rgba(200, 200, 200, 1);
}
</style>